<template>
    <view>
        <view class="bg-img movie-card"
              :style="[{ backgroundImage:'url(' + pic + ')' }]"
              style="height: 300upx;">
            <view class='vip' v-if="is_vip">
                <text class="icon text-red cuIcon-playfill" ></text>
                <text class="text">VIP</text>
            </view>
            <view class='cu-tag sm  vip' v-else-if="is_recommended">
                <text class="icon text-red cuIcon-playfill" ></text>
                <text class="text">荐</text>
            </view>
            <view class='cu-tag sm  vip' v-else-if="is_hot">
                <text class="icon text-red cuIcon-playfill" ></text>
                <text class="text">热</text>
            </view>
            <text class="score" v-if="score">{{score}}</text>
        </view>
        <view class="title">{{name}}</view>
        <view class="desc text-cut">{{desc}}</view>
    </view>
</template>

<script>
    export default {
        name: "movieCard",
        props: {
            "pic": {
                default: "http://imgwx5.2345.com/dypcimg/img/5/67/sup203356_223x310.jpg",
            },
            "name": {
                default: '炽焰妖姬',
                // required:true
            },
            "score": {
                default: '9.8',
            },
            "desc": {
                default: "这是一部非常好看的电影"
            },
            "is_hot": {
                default: 1
            },
            "is_recommended": {
                default: 1
            },
            "is_vip": {
                default: 1
            }
        },
        data() {
            return {};
        },
        methods: {}
    }
</script>

<style lang="scss" scoped>
    .title{
        margin-top: 12upx;
        font-size: 28upx;
        line-height: 40upx;
        color: #000028;
    }
    .desc{
        width: 228upx;
        margin-top: 8upx;
        font-size: 24upx;
        line-height: 36upx;
        color: #a2a2b6;
    }
    .movie-card {
        position: relative;
        .vip {
            position: absolute;
            top: 10upx;
            left: 0upx;
            line-height: 18upx;
            font-size: 20upx;
            .icon{
                position: absolute;
                top: 0;
                left: 0;
                width: 6px;
                height: 10px;
            }
            .text{
                padding-left: 24upx;
                text-shadow: 0px 1px 2px #555;
                color: #fff;
            }
        }
        .score {
            font-size: 20upx;
            padding: 4upx 6upx;
            display: table;
            opacity: 0.8;
            color: #fff;
            position: absolute;
            bottom: 10upx;
            right: 10upx;
            background-color: rgba(162, 162, 182, 0.5);
        }
    }

</style>
